import React, { FC } from "react";
import { CSSTransition } from 'react-transition-group';
import { CSSTransitionProps } from 'react-transition-group/CSSTransition';

type AnimationName = 'zoom-in-top' | 'zoom-in-left' | 'zoom-in-bottom' | 'zoom-in-right'


type transitionProps = CSSTransitionProps & {
    animation?: AnimationName,
    wrapper? : boolean,
}


const Transition:FC<transitionProps> = (props)=>{

    const {
        children,
        classNames,
        animation,
        ...restProps
    } = props;


    return <CSSTransition classNames={classNames ? classNames : animation} {...restProps}>
        {children}
    </CSSTransition>
};


Transition.defaultProps = {
    unmountOnExit : true,
    appear : true, 
}
Transition.displayName = 'Transition';
export default Transition;